<template>
<div id="app-tarbar-list">
     <router-link  
        v-for="ll of list" 
        :key="ll.path" 
        :to='ll.path'
        tag='div'
        >
         
   <div  v-if="ll.isBadge===true">
            <mt-badge type="error" >{{tocont}}</mt-badge>
         <span id="icon" v-html="ll.icon"  ></span>
     
      
     </div>
     <div  v-else>
   
         <span id="icon" v-html="ll.icon"  ></span>
      
      
     </div>
       <span id="text">{{ll.text}}</span>
        
        </router-link>
    </div>    
</template>

<script>
import routes from '../router/routes'
import { Badge } from 'mint-ui';
import {mapGetters} from 'vuex'
export default {
  name:'ab',
 data(){
  
    return {
      list:routes.filter(item=>item.isNav===true)
    }
  },
  components:{
    'mt-badge':Badge
  },
 
  computed:{
       
          ...mapGetters(['tocont'])
    }
}
</script>

<style lang="scss" scoped >
  @font-face {
  font-family: 'iconfont';  /* project id 930700 */
  src: url('//at.alicdn.com/t/font_930700_pl2oaxncno.eot');
  src: url('//at.alicdn.com/t/font_930700_pl2oaxncno.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_930700_pl2oaxncno.woff') format('woff'),
  url('//at.alicdn.com/t/font_930700_pl2oaxncno.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_930700_pl2oaxncno.svg#iconfont') format('svg');
}
 #icon{
     display:block;
     height:25px;
     text-align: center;
      font-family: 'iconfont';
      margin-top: 5px;
     
 }
 #text{
     font-size: 12px;
     height: 30px;
    color: #616161;
 }
 .mint-badge {
     position: absolute;
       bottom: 33px;
    left: 242px;
 }
</style>
